package com.dji.compose_learning.ui.view

import androidx.compose.animation.*
import androidx.compose.animation.core.*
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalAnimationApi::class)
@Composable
fun AnimatePageView() {
    MaterialTheme {
        Surface(modifier = Modifier.fillMaxSize()) {
            Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
                //sample 2
                var shown by remember {
                    mutableStateOf(false)
                }
                Text(text = "自定义消息显示动画")
                Spacer(modifier = Modifier.height(10.dp))
                Box {
                    Column {
                        //从上往下划出显示 -height-》0，从下网上划出隐藏 0-》-height
                        AnimatedVisibility(visible = shown,
                            enter = slideInVertically(animationSpec = TweenSpec(durationMillis = 500,
                                easing = LinearOutSlowInEasing),
                                initialOffsetY = { fullHeight -> -fullHeight }),
                            exit = slideOutVertically(animationSpec = TweenSpec(durationMillis = 300,
                                easing = FastOutLinearInEasing),
                                targetOffsetY = { fullHeight -> -fullHeight })) {
                            Box(modifier = Modifier
                                .fillMaxWidth()
                                .height(20.dp)
                                .background(MaterialTheme.colorScheme.primary))
                        }
                    }
                    Column {
                        Box(modifier = Modifier
                            .fillMaxWidth()
                            .height(20.dp)
                            .background(Color.Yellow))
                        Spacer(modifier = Modifier.height(10.dp))
                        Button(onClick = {
                            shown = !shown
                        }) {
                            Text(text = "show")
                        }
                    }
                }


                // sample 1 简单值动画
                Spacer(modifier = Modifier.height(10.dp))
                Text(text = "简单值动画显示")
                var currentState by remember {
                    mutableStateOf(false)
                }
                //颜色动画
                val backgroundColor by animateColorAsState(targetValue = if (currentState) Color.Yellow else Color.Magenta,
                    animationSpec = TweenSpec(durationMillis = 400))
                //自定义float值变化动画
                val animatedSize by animateValueAsState(targetValue = if (currentState) 100f else 50f,
                    typeConverter = TwoWayConverter<Float, AnimationVector>(
                        convertToVector = {
                            AnimationVector1D(it)
                        },
                        convertFromVector = {
                            (it as AnimationVector1D).value
                        }
                    ),
                    animationSpec = TweenSpec(durationMillis = 400))
                //size动画
                val sizeAnimate by animateSizeAsState(targetValue = if (currentState) Size(50f,
                    100f) else Size(100f, 50f))
                //位移动画
//            val context = LocalContext.current
                val offset by animateIntOffsetAsState(targetValue = if (currentState) IntOffset(100,
                    80) else IntOffset(0, 0))

                val offsetX by animateDpAsState(targetValue = if (currentState) 100.dp else 0.dp)
                Row(modifier = Modifier
                    .fillMaxWidth()
                    .height(200.dp)) {
                    Box(modifier = Modifier
                        .size(50.dp)
                        .background(backgroundColor))
                    Spacer(modifier = Modifier.width(10.dp))
                    Box(modifier = Modifier
                        .size(animatedSize.dp)
                        .background(backgroundColor))
                    Spacer(modifier = Modifier.width(10.dp))
                    Box(modifier = Modifier
                        .width(sizeAnimate.width.dp)
                        .height(sizeAnimate.height.dp)
                        .background(backgroundColor.copy(alpha = 0.4f)))
                    Spacer(modifier = Modifier.width(10.dp))
                    Box(modifier = Modifier.size(200.dp)) {
                        Box(modifier = Modifier
                            .size(50.dp)
                            .background(backgroundColor)
                            .offset(x = offset.x.dp, y = offset.y.dp)//为什么没有移动？
                        )
                    }

                    Spacer(modifier = Modifier.width(10.dp))
                    //可见性动画
                    AnimatedVisibility(visible = currentState) {
                        Box(modifier = Modifier
                            .size(50.dp)
                            .background(backgroundColor))
                    }
                }

                Button(onClick = {
                    currentState = !currentState
                }) {
                    Text(text = "change color")
                }

                Spacer(modifier = Modifier.height(10.dp))
                //内容显示动画
                Text(text = "内容显示动画")
                Spacer(modifier = Modifier.height(10.dp))
                var showMore by remember {
                    mutableStateOf(false)
                }
                Text(text = "This is text line one.\nwe need checkout this morning.\nare you sure this is my book?",
                    modifier = Modifier
                        .clickable {
                            showMore = !showMore
                        }
                        .animateContentSize(), maxLines = if (showMore) Int.MAX_VALUE else 1)

                var state by remember {
                    mutableStateOf("hello")
                }
                Spacer(modifier = Modifier.height(10.dp))
                Button(onClick = {
                    state += "\nAdd an other line here."
                }) {
                    Text(text = "Add")
                }
                AnimatedContent(targetState = state, transitionSpec = {
                    (scaleIn() with scaleOut()).using(SizeTransform(false))
                }) {
                    Text(text = "$state")
                }

                //页面切换的动画
                var flag by remember {
                    mutableStateOf(0)
                }
                Crossfade(targetState = flag, animationSpec = tween(300)) {
                    when (it) {
                        0 -> Scene1()
                        1 -> Scene2()
                        2 -> Scene3()
                    }
                }
                Spacer(modifier = Modifier.height(10.dp))
                Text(text = "页面切换/布局过渡动画")
                Spacer(modifier = Modifier.height(10.dp))
                Button(onClick = {
                    flag = (++flag) % 3
                }) {
                    Text(text = "Switch")
                }

                //sample3 多值动画
                Spacer(modifier = Modifier.height(10.dp))
                Text(text = "多值动画")
                Spacer(modifier = Modifier.height(10.dp))
                var transitionState by remember {
                    mutableStateOf(50)
                }
                val transition =
                    updateTransition(targetState = transitionState, "transition animation")
                val colorTransition by transition.animateColor(targetValueByState = {
                    Color.Magenta.copy(alpha = it.toFloat() / 100)
                }, label = "transition animation")
                val transitionSize by transition.animateDp(targetValueByState = {
                    it.dp
                }, label = "transition animation")
                val transitionCornor by transition.animateDp(label = "transition animation") {
                    (it / 5).dp
                }
                Surface(modifier = Modifier
                    .size(transitionSize)
                    .clickable {
                        transitionState = if (transitionState == 50) {
                            100
                        } else {
                            50
                        }
                    },
                    color = colorTransition,
                    shape = RoundedCornerShape(transitionCornor)) {
                }

                Spacer(modifier = Modifier.height(10.dp))
                Text(text = "重复动画")
                Spacer(modifier = Modifier.height(10.dp))
                val infiniteTransition = rememberInfiniteTransition()
//                infiniteTransition.animateValue(initialValue = 0.dp,
//                    targetValue = 100.dp,
//                    animationSpec = InfiniteRepeatableSpec(animation = tween(durationMillis = 300),
//                        repeatMode = RepeatMode.Reverse,
//                        initialStartOffset = StartOffset(0)),
//                    typeConverter = TwoWayConverter(convertFromVector = {}, convertToVector ={AnimationVector1D(it as Dp)})
//                )
                val offsets by infiniteTransition.animateFloat(initialValue = 0f,
                    targetValue = 100f,
                    animationSpec = infiniteRepeatable(
                        animation = keyframes {
                            durationMillis = 1000  //指定动画时间
                            50f at 500  //指定关键帧
                        }, repeatMode = RepeatMode.Reverse
                    ))

                Box(modifier = Modifier
                    .size(50.dp)
                    .offset(x=offsets.dp)
                    .background(Color.Yellow))

            }
        }
    }
}

@Composable
fun Scene1() {
    Box(modifier = Modifier
        .size(100.dp)
        .background(Color.Cyan)
        .padding(10.dp)) {
        Text(text = "Scene1")
    }
}

@Composable
fun Scene2() {
    Box(modifier = Modifier
        .size(100.dp)
        .background(Color.Yellow)
        .padding(10.dp)) {
        Text(text = "Scene2")
    }
}

@Composable
fun Scene3() {
    Box(modifier = Modifier
        .size(100.dp)
        .background(Color.Magenta)
        .padding(10.dp)) {
        Text(text = "Scene3")
    }
}













